/* 动画背景 */
@keyframes headerAni {
	0% {
		background-color: #a7a4a4;
	}

	25% {
		background-color: #d3cccc;
	}

	50% {
		background-color: #e4e4e4;
	}

	100% {
		background-color: #a7a4a4;
	}
}
/* 动画移动 */
@keyframes translate1 {
	0% {
		transform: translate(-30px);
	}

	50% {
		transform: translate(15px);
	}

	100% {
		transform: translate(0px);
	}
}
/* 小人 */
@keyframes child1 {
	0% {
		left: 0;
		bottom: 0;
		transform: rotateY(0deg);
	}
	49.9% {
		transform: rotateY(0deg);
	}
	50% {
		left: 960px;
		transform: rotateY(180deg);
	}

	100% {
		left: 0;
		bottom: 0;
		transform: rotateY(180deg);
	}
}
/* 类目一：教育经历 */
#education:hover {
	height: 200px;
}
#education:hover li {
	animation: Duang2 1.5s ease-in forwards 0.1s;
}

/* 图标动画效果 */
/* 教育 */
@keyframes Duang1 {
	0% {
		opacity: 0;
		position: absolute;
		left: 8px;
		top: -271px;
		color: black;
	}

	50% {
		opacity: 1;
		position: absolute;
		left: 8px;
		top: 4px;
		color: rgb(143, 70, 70);
	}

	75% {
		opacity: 1;
		position: absolute;
		left: 8px;
		top: -14px;
		color: rgb(146, 92, 92);
	}

	100% {
		opacity: 1;
		position: none;
		color: rgb(156, 111, 111);
	}
}
/* 院校详细动画 */
@keyframes Duang2 {
	0% {
		opacity: 0;
		position: absolute;
		left: 8px;
		top: 0px;
	}
	100% {
		opacity: 1;
		position: absolute;
		left: 8px;
		top: 64px;
	}
}

@keyframes Duang4 {
	0% {
		opacity: 0;
		position: absolute;
		left: 8px;
		top: 0px;
	}
	100% {
		opacity: 1;
		position: absolute;
		left: 8px;
		top: 80px;
	}
}
@keyframes Duang5 {
	0% {
		opacity: 0;
		position: absolute;
		left: 8px;
		top: 50px;
	}
	100% {
		opacity: 1;
		position: absolute;
		left: 8px;
		top: 230px;
	}
}
@keyframes Duang6 {
	0% {
		opacity: 0;
		position: absolute;
		left: 8px;
		top: 170px;
	}
	100% {
		opacity: 1;
		position: absolute;
		left: 8px;
		top: 380px;
	}
}
@keyframes Duang7 {
	0% {
		opacity: 0;
		position: absolute;
		left: 8px;
		top: 470px;
	}
	100% {
		opacity: 1;
		position: absolute;
		left: 8px;
		top: 530px;
	}
}
@keyframes Duang8 {
	0% {
		opacity: 0;
		position: absolute;
		left: 8px;
		top: 530px;
	}
	100% {
		opacity: 1;
		position: absolute;
		left: 8px;
		top: 690px;
	}
}

/* 类目二：项目 */
#program:hover {
	height: 1000px;
}
#program:hover ul li:first-child {
	animation: Duang4 1.5s ease-in forwards;
}
#program:hover ul li:nth-child(2) {
	animation: Duang5 1.5s ease-in forwards;
}
#program:hover ul li:nth-child(3) {
	animation: Duang6 1.5s ease-in forwards;
}
#program:hover ul li:nth-child(4) {
	animation: Duang7 1.5s ease-in forwards;
}
#program:hover ul li:nth-child(5) {
	animation: Duang8 1.5s ease-in forwards;
}
/* 证书 */
#certificate:hover {
	height: 200px;
}
#certificate:hover ul li {
	animation: Duang2 1.5s ease-in forwards;
}
/* 技能 */
@keyframes Duang9 {
	0% {
		position: absolute;
		left: 8px;
		top: 14px;
		opacity: 0;
	}
	100% {
		position: absolute;
		left: 8px;
		top: 60px;
		opacity: 1;
	}
}
@keyframes Duang10 {
	0% {
		position: absolute;
		left: 8px;
		top: 14px;
		opacity: 0;
	}
	100% {
		position: absolute;
		left: 8px;
		top: 100px;
		opacity: 1;
	}
}
@keyframes Duang11 {
	0% {
		position: absolute;
		left: 8px;
		top: 14px;
		opacity: 0;
	}

	100% {
		position: absolute;
		left: 8px;
		top: 150px;
		opacity: 1;
	}
}
#skills:hover ul li:nth-child(1) {
	animation: Duang9 1.5s ease-in forwards;
}
#skills:hover ul li:nth-child(2) {
	animation: Duang10 1.5s ease-in forwards;
}
#skills:hover ul li:nth-child(3) {
	animation: Duang11 1.5s ease-in forwards;
}
#skills:hover {
	height: 200px;
}
/* 技能条 */
/* 动画 */
@keyframes leng1 {
	0% {
		width: 100px;
		background-color: rgba(230, 148, 148, 0.8);
		box-shadow: 2px 0px 10px 5px rgba(200, 200, 240, 0.9);
	}
	50% {
		width: 150px;
		background-color: rgba(241, 183, 183, 0.8);
		box-shadow: 2px 0px 10px 5px rgba(200, 200, 240, 0.9);
	}
	100% {
		width: 200px;
		background-color: rgba(253, 194, 194, 0.8);
		box-shadow: 2px 0px 10px 5px rgba(200, 200, 240, 0.9);
	}
}
@keyframes leng2 {
	0% {
		width: 50px;
		background-color: rgba(225, 201, 123, 0.8);
		box-shadow: 2px 0px 10px 5px rgba(200, 200, 240, 0.9);
	}
	50% {
		width: 100px;
		background-color: rgba(226, 243, 74, 0.8);
		box-shadow: 2px 0px 10px 5px rgba(200, 200, 240, 0.9);
	}
	100% {
		width: 200px;
		background-color: rgba(210, 214, 150, 0.8);
		box-shadow: 2px 0px 10px 5px rgba(200, 200, 240, 0.9);
	}
}
@keyframes leng3 {
	0% {
		width: 50px;
		background-color: rgba(135, 228, 228, 0.8);
		box-shadow: 2px 0px 10px 5px rgba(200, 200, 240, 0.9);
	}
	50% {
		width: 100px;
		background-color: rgba(150, 231, 156, 0.8);
		box-shadow: 2px 0px 10px 5px rgba(200, 200, 240, 0.9);
	}
	100% {
		width: 160px;
		background-color: rgba(131, 228, 228, 0.8);
		box-shadow: 2px 0px 10px 5px rgba(200, 200, 240, 0.9);
	}
}
#skills:hover .one {
	animation: leng1 3s linear forwards 2s;
}
#skills:hover .two {
	animation: leng2 3s linear forwards 2s;
}
#skills:hover .three {
	animation: leng3 3s linear forwards 2s;
}
